<template>
  <transition name="todo" appear>
    <li>
      <label>
        <input 
          type="checkbox" 
          :checked='todo.done' 
          @change="handleCheck(todo.id)"
        />
        <span v-show="!todo.isEdit"> {{todo.title}} </span>
        <input 
          type="text"
          v-show="todo.isEdit" 
          :value="todo.title"
          @blur="handleBlur(todo,$event)"
          ref="inputTitle"
          >
      </label>
      <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
      <button class="btn btn-edit" v-show="!todo.isEdit" @click="handleEdit(todo)">编辑</button>
    </li>
  </transition>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
    name: "TodoItem",
    props:['todo'],
    methods: {
      //勾选
      handleCheck(id){
        //this.checkTodo(id)
        this.$bus.$emit('checkTodo',id)
      },
      //删除
      handleDelete(id){
        if (confirm('确认删除?')) {
          //this.deleteTodo(id)
          //this.$bus.$emit('deleteTodo',id)
          pubsub.publish('deleteTodo',id)
        }
      },
      //编辑
      handleEdit(todo){
        if (Object.prototype.hasOwnProperty.call(todo,'isEdit')) {
          todo.isEdit = true
        } else {
          this.$set(todo,'isEdit',true)
        }
        this.$nextTick(()=>{
          this.$refs.inputTitle.focus()
        })
        
      },
      //失去焦点回调
      handleBlur(todo,e){
				todo.isEdit = false
				if(!e.target.value.trim()) return alert('输入不能为空！')
				this.$bus.$emit('updateTodo',todo.id,e.target.value)
			}
    },

    }
</script>

<style scoped>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }
  li label {
    float: left;
    cursor: pointer;
  }
  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }
  li:before {
    content: initial;
  }
  li:last-child {
    border-bottom: none;
  }
  li:hover{
    background-color: #ddd;
  }
  li:hover button{
    display: block;
  }
  .todo-enter-active{
      animation: anim 0.5s linear ;
    }
  .todo-leave-active{
      animation: anim 0.5s linear reverse;
  }
  @keyframes anim{
      from{
          transform: translateY(-100%);
      }
      tp{
          transform: translateY(0px);
      }
  }
</style>